<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="类型编号：">
            <el-input
              v-model="page.typeNumber"
              placeholder="请输入类型编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型名称：">
            <el-input
              v-model="page.name"
              placeholder="请输入类型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="起始机构类型：">
            <el-select v-model="page.startAgencyType" placeholder="请选择">
              <el-option label="分公司" value="1"></el-option>
              <el-option label="一级转运中心" value="2"></el-option>
              <el-option label="二级转运中心" value="3"></el-option>
              <el-option label="网点" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br />

    <el-dialog title="新增线路类型" :visible.sync="addTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="*线路类型编号">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入线路类型编号"
              v-model="AddTruck.typeNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="*线路类型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入线路类型名称"
              v-model="AddTruck.name"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="*起始机构类型">
            <el-select v-model="AddTruck.startAgencyType" placeholder="请选择">
              <el-option label="分公司" value="1"></el-option>
              <el-option label="一级转运中心" value="2"></el-option>
              <el-option label="二级转运中心" value="3"></el-option>
              <el-option label="网点" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="终点机构类型">
            <el-select v-model="AddTruck.endAgencyType" placeholder="请选择">
              <el-option label="分公司" value="1"></el-option>
              <el-option label="一级转运中心" value="2"></el-option>
              <el-option label="二级转运中心" value="3"></el-option>
              <el-option label="网点" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑车型" :visible.sync="updateTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="*线路类型编号">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入线路类型编号"
              v-model="up.typeNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="*线路类型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入线路类型名称"
              v-model="up.name"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="*起始机构类型">
            <el-select v-model="up.startAgencyType" placeholder="请选择">
              <el-option label="分公司" :value="1"></el-option>
              <el-option label="一级转运中心" :value="2"></el-option>
              <el-option label="二级转运中心" :value="3"></el-option>
              <el-option label="网点" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="终点机构类型">
            <el-select v-model="up.endAgencyType" placeholder="请选择">
              <el-option label="分公司" :value="1"></el-option>
              <el-option label="一级转运中心" :value="2"></el-option>
              <el-option label="二级转运中心" :value="3"></el-option>
              <el-option label="网点" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="upqd">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-button style="margin-right: 90%" @click="Add" type="danger"
          >+新增线路类型</el-button
        >
      </el-form>
      <div>
        <el-table
          height="420px"
          :data="tableData"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column prop="id" label="序号" width="120"></el-table-column>
          <el-table-column
            prop="typeNumber"
            label="线路类型编号"
          ></el-table-column>
          <el-table-column prop="name" label="线路类型名称"></el-table-column>
          <el-table-column prop="startAgencyType" label="起始机构类型">
            <template slot-scope="scope">
              {{ scope.row.startAgencyType == 1 ? "分公司" : "" }}
              {{ scope.row.startAgencyType == 2 ? "一级转运中心" : "" }}
              {{ scope.row.startAgencyType == 3 ? "二级转运中心" : "" }}
              {{ scope.row.startAgencyType == 4 ? "网点" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="endAgencyType" label="终点机构类型">
            <template slot-scope="scope">
              {{ scope.row.endAgencyType == 1 ? "分公司" : "" }}
              {{ scope.row.endAgencyType == 2 ? "一级转运中心" : "" }}
              {{ scope.row.endAgencyType == 3 ? "二级转运中心" : "" }}
              {{ scope.row.endAgencyType == 4 ? "网点" : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="lastUpdateTime" label="最近更新时间">
          </el-table-column>
          <el-table-column prop="updater" label="更新人"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-link type="danger" @click="open(scope.row.id)">删除</el-link>|
              <!-- <el-link slot="reference" type="danger" @click="Del(scope.row.id)">删除</el-link>| -->
              <el-link type="primary" @click="update(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  AddTransportLineType,
  findTransportLineType,
  UpdateTransportLineType,
  DeleteTransportLineTypeByid,
} from "@/api/wj/Vehicle";
export default {
  data() {
    return {
      tableData: [],
      up:{},
      currentPage4: 4,
      total: 10,
      formInline: {},
      visible: {},
      Truck: {},
      addTruck: false,
      updateTruck: false,
      AddTruck: {},
      page: {
        pageindex: 1,
        pagenum: 5,
        typeNumber: "",
        name: "",
        startAgencyType: "",
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pagenum = val;
      console.log(`每页 ${val} 条`);
      this.pageinfo();
    },
    handleCurrentChange(val) {
      this.page.pageindex = val;
      console.log(`当前页: ${val}`);
      this.pageinfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    onSubmit() {
      this.pageinfo();
    },
    cz() {
      this.page.name = "";
      this.page.typeNumber = "";
      this.page.startAgencyType = "";
    },
    Add() {
      this.addTruck = true;
    },
    qx() {
      this.addTruck = false;
    },
    add() {
      AddTransportLineType(this.AddTruck).then((data) => {
        if (data.data > 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addTruck = false;
          this.pageinfo();
        }
      });
    },
    open(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
        DeleteTransportLineTypeByid(id).then((data) => {
          if(data.data>0){
            this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.pageinfo();
          }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    update(s) {
      this.up=s;
      this.updateTruck = true;
    },
    upqx() {
      this.updateTruck = false;
    },
    upqd() {
      UpdateTransportLineType(this.up).then((data) => {
      if(data.data>0){
        this.$message({
        message: "编辑成功",
        type: "success",
      });
      }
      this.updateTruck = false;
      this.pageinfo();
      });
    },
    pageinfo() {
      findTransportLineType(this.page).then((data) => {
        this.tableData = data.data.list;
        this.total = data.data.total;
      });
    },
  },
  created() {
    this.pageinfo();
  },
};
</script>

<style>
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  } */
</style>